<template>
    <div class="friendDet">
        
        <img :src="friend.friendDetail.img" alt="">
        <div class="detail">
            <!-- <p>id:{{friend.user.id}}</p> -->
            <ul>
                <li><p>昵称：{{friend.friendDetail.name}}</p> </li>
                <li><p>签名: {{friend.friendDetail.signature}}</p> </li>
            </ul>
        
        
        
        </div>
        
        
    </div>
  
  
</template>

<script setup>
import {defineOptions} from 'vue';
import {useFriendStore} from '@/stores'
const friend = useFriendStore();
defineOptions({
    name:'friendDetail'
})
</script>

<style lang="less" scoped>
.friendDet{
    display: flex;
    align-items: center;
    margin: 0 auto ;
    flex-direction: column;
    
    width: 100%;
    height: 100%;
    img{
        margin-top: 160px;
        width: 200px;
        height: 200px;
        border-radius: 5%;
    }
    div{
        width: 200px;
        
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100px;
        max-width: 300px;
        ul li {
            width: 100%;
            
            display: flex;
            text-align: left;
            justify-content: left;
            p{
                width: 100%;
                word-wrap:break-word
            }
            span{
                background-color: pink;
                
                margin-right: 100px;
            }
        }
    }
}
</style>